<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>home</title>
  <link rel="stylesheet" href="../static/materialize/css/materialize.min.css">
  <link rel="stylesheet" href="../static/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/common/common.css">
</head>

<body>
  <!-- 头部 -->
  <header class="hide-on-med-and-down container" style="height: 80px">
    <div class="left valign-wrapper" style="line-height: 80px;height: 100%;">
      <h5>辽宁多宝评级有限公司</h5>
    </div>
    <div class="right amber-text text-darken-4"
      style="line-height: 80px;height: 100%;font-size: 1.7rem;font-style: italic;">
      <a class="pulse amber-text text-darken-4" style="font-size:2rem;vertical-align: middle;"><i class="fa fa-phone"
          aria-hidden="true"></i></a>
      17676768787
    </div>
  </header>
  <!-- 导航栏 -->
  <nav class="red darken-4 pushpin" style="z-index: 10">
    <div class="nav-wrapper container">
      <a href="#" data-target="slide-out" class="sidenav-trigger hide-on-large-only">
        <i class="material-icons large">menu</i>
      </a>
      <a href="#" class="brand-logo white-text hide-on-large-only truncate" style="font-size: 1.5rem;">辽宁多宝评级有限公司</a>
      <ul id="nav-mobile" class="hide-on-med-and-down">
        <li><a href="">关于多宝</a></li>
        <li><a href="">藏品展示</a></li>
        <li><a href="">评级</a></li>
        <li><a href="">联系我们</a></li>
      </ul>
    </div>
  </nav>
  <!-- 侧边栏导航 -->
  <ul id="slide-out" class="sidenav">
    <li>
      <h1 class="user-view" style="font-size: 1.5rem;">辽宁多宝评级有限公司</h1>
    </li>
    <li><a href="#">关于多宝</a></li>
    <li><a href="#">藏品展示</a></li>
    <li><a href="#">关于多宝</a></li>
  </ul>
  <div class="carousel carousel-slider center" id="carousel">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <script src="../static/materialize/js/materialize.js"></script>
  <script>
    // 侧边导航
    var elem, instance;
    elem = document.getElementById('slide-out')
    instance = M.Sidenav.init(elem, {
      // 弹出方向
      edge: 'left',
      draggable: true
    });

    // 粘性布局 固定在顶部
    var elems = document.querySelectorAll('.pushpin');
    var instances = M.Pushpin.init(elems, {
      // 距离顶部的距离
      top: 50
    });

    // 轮播图
    var elemCarousel = document.querySelector('.carousel');
    var CarouselTimeCount = 0; // 轮播计时器
    var instanceCarousel = M.Carousel.init(elemCarousel, {
      // 持续时间 毫秒单位 默认200
      duration: 200,
      // 透视变焦 如果设置为0  则元素一样大小 默认-100
      dist: 0,
      // 设置中心项的间距 默认0
      shift: 0,
      // 在非中心项之间设置填充 默认0
      padding: 0,
      // 设置可见项目的数量 默认5
      numVisible: 5,
      // 全屏模式 默认false
      fullWidth: true,
      // 显示点点点点标识 默认false
      indicators: true,
      // 不要循环播放 默认false
      noWrap: false,
      // 轮播之后的回调 默认null
      onCycleTo: () => {
        // 重置计时器时间
        CarouselTimeCount = 0;
      }
    }, false);
    setInterval(() => {
      if (CarouselTimeCount >= 5) {
        // 轮播下一页
        instanceCarousel.next();
      }
      CarouselTimeCount++;
    }, 1000);
  </script>
</body>

</html>